<template>
    <search-table
      :columns="type == 1?vpnColumns1:vpnColumns2"
      :data="vpnData"
      :page.sync="pageIndex"
      :size.sync="pageSize"
      :total="total"
      @change-page="pageChange"
      @change-size="sizeChange"
      showSelectTag
      :disabled="disabledAllBtn"
      :selectKey="type == 1 ? 'teamId' : 'id'"
      :selectName="(data) => type == 1 ? data.data[0].team : data.userName"
      :selection.sync="chooseVpnInfo"
    >
    <template slot="search">
      <div class="search-btn" style="margin-bottom: 8px;">
        <Input placeholder="团队名称" v-model="querySearch.teamName" class="action-style" @on-change="onBounceQuery" clearable />
        <Input placeholder="用户名称" class="action-style" v-model="querySearch.userName"  @on-change="onBounceQuery" clearable/>
        <Input v-show="type == 2" placeholder="VPN名称" class="action-style" v-model="querySearch.vpnName"  @on-change="onBounceQuery" clearable/>
        <Select filterable v-show="type == 2" placeholder="VPN分发状态" class="action-style"  v-model="querySearch.statusDistribute"  @on-change="onBounceQuery"  clearable>
            <Option v-for="item in statusDistributeList" :label="item.label" :key="item.value" :value="item.value" />
        </Select>
        <Button type="primary" ghost icon="ios-cloud-download-outline" @click="downloadData" :loading="downLoading" :disabled="!isAllSuccess || disabledAllBtn" class="button-style">批量下载</Button>
        <Button type="primary" ghost icon="ios-nuclear-outline" @click="sendData" class="button-style" :loading="sendLoading" :disabled="!isAllSuccess || disabledAllBtn">批量分发</Button>
        <Button type="primary" ghost icon="ios-repeat" @click="createVpnData" :disabled="!isAllFailed || disabledAllBtn"  v-if="type == 2" class="button-style" :loading="vpnLoading">批量生成</Button>
        <Button type="primary" ghost @click="createData" v-if="type == 1 && isShowFirst" class="button-style" :loading="firstLoading" :disabled="timeBan || disabledAllBtn">初始生成</Button>

        <Button type="primary" ghost icon="ios-refresh" @click="getDataList"  class="button-style">刷新</Button>
      </div>
        <div class="online-data">
          <div class="ol-person-data">
            <Icon type="ios-person-outline" class="ol-icon"/>
            <span class="online">VPN在线人数：{{vpnNum.onlineUserNum}}</span>
            /<span class="online-total">总数：{{vpnNum.userNum}}</span>
          </div>
          

          <div class="ol-team-data">
            <Icon type="ios-people-outline" class="ol-icon"/>
            <span class="online">VPN在线团队数：{{vpnNum.onlineTeamNum}}</span>
            /<span class="online-total">总数：{{vpnNum.teamNum}}</span>
          </div>
          
        </div>
    
    
    
    </template>
        <!-- vpn状态记录弹窗 -->
        <Modal 
            title="VPN状态"
            v-model="modalVPN"
            class-name="vpn-status-modal"
            :width="1200"
			@on-visible-change="modalChange">
            <div class="action_box">
                <!-- <Input v-model="teamName" placeholder="团队名称" class="action-style" @on-change="onBounceModal" /> -->
                <Input v-model="vpnIp" placeholder="VPNIP" clearable class="action-style" @on-change="onBounceModal" />
                <Input v-model="ip" placeholder="远程IP" clearable class="action-style" @on-change="onBounceModal" />
                <Input v-model="address" placeholder="地理位置" clearable class="action-style" @on-change="onBounceModal" />
            </div>
            <Table :columns="columnsModal" :data="dataModal"></Table>
            <div style="display: flex;justify-content: center;margin: 15px 0" v-if="totalModal">
                <Page :total="totalModal" :page-size="pageSizeModal" :current="pageIndexModal" show-total show-elevator @on-change="pageChangeModal"/>
            </div>
            <div slot="footer">
                <Button type="primary" @click="modalVPN = false;">确定</Button>
            </div>
        </Modal>
    </search-table>
</template>

<script>
    import { debounce } from '@/libs/utils';
    import {
        getOnlineVPNCount,
        teamGroupList,
        teamPersonList,
        downLoadFilevpn,
        getVpnStatus,
        redisDistribute,
        getScriptId,
        vpnRegeneration,
        VpnGenerate
    } from '@/api/drill';
    export default {
        name: 'vpnMange',
        props: {
            type: {
                type: Number,
                default: 0  // 1-团队 2-个人
            },
            testId: {
                type: String,
            },
            disabledAllBtn: {
                type: Boolean,
                default: false
            }
        },
        components: {
           
        },
        mounted() {
            this.getDataList()
            // if(this.type == 2) {
            //     this.userListTimer = setInterval(() => {
            //         this.getDataList()
            //     }, 10000);
            // }
            this.getShowFirst()
            this.getAllCount()
        },
        beforeDestroy() {
            clearTimeout(this.userListTimer)
            clearTimeout(this.vpnTimer)
        },
        data() {
            return {
              vpnNum:{
                  onlineUserNum: 0,
                  onlineTeamNum: 0,
                  userNum: 0,
                  teamNum: 0
                },
                selectAll: false,
                total: 0,
                pageIndex: 1,
                pageSize: 10,
                querySearch: {
                    teamName: '', // 团队名称
                    userName: '', // 用户名称
                    vpnName: '', 
                    statusDistribute: '',
                },
                statusDistributeList: [
                    { label: '未分发', value: 0},
                    { label: '已分发', value: 1},
                    // { label: '分发中', value: 2},
                    // { label: '等待分发', value: 3},
                    { label: '分发失败', value: 4},
                ],
                vpnData: [],
                vpnColumns1: [
                    {
                        type:'selection',
                        width:60
                    },
                    {
                        title: '团队名称',
                        key: 'name',
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                        width: 200,
                        placement: 'top-left',
                        // filter:(name,data) => data.data[0].team,
                        render: (h, params) => {
                          console.log('-----params--',params.row.data)
                          let arr = params.row.data
                          const hasOneIsOnline = arr.some(item => item.isOnline === true);
                          let color=hasOneIsOnline?'rgb(50, 205, 50)':'var(--table-tr-color)'
                          return h('p', {
                            style: {
                              color:color
                            }
                          }, params.row.data[0].team)
                        }
                    },
                    {
                        title: '用户名称',
                        key: 'userName',
                        align: 'center',
                        tooltip: true,
                        // filter:(userName,data) => data.data.map(item => item.userName).join(',')
                        render: (h, params) => {
                          let arr = params.row.data

                          let userspan = h('span', {}, [
                            arr.map((item,i) => {
                              let color = item.isOnline?'rgb(50, 205, 50)':'var(--table-tr-color)'
                              //color = i%2?'rgb(50, 205, 50)':'var(--table-tr-color)'
                              let douhao = i==arr.length-1?'':','
                              return h('span', { style: { color } }, `${item.userName} ${douhao} `);
                            })
                          ]);
                          
                          return h('div', {}, [
                            userspan
                          ]);
                        }
                    },
                    {
                        title: 'VPN状态',
                        key: 'status',
                        align: 'center',
                        width: 140,
                        render: (h, params) => {
                            return h('Button', {
                                props:{
                                    type:'primary',
                                    size:'small'
                                }, 
                                on: {
                                    'click': () => {
                                        this.showStatus(params.row)
                                    }
                                }
                            }, '查看')
                        }
                    },
                    {
                        title: '操作',
                        action: true,
                        key: 'action',
                        width: 200,
                        placement: 'top-right',
                        opList:[
                            {
                                txt:"下载",
                                disabled: () => {
                                    return this.disabledAllBtn
                                },
                                on: {
                                    click: (data) => {
                                        this.downloadFile(data)
                                    }
                                }
                            },
                            {
                                txt:"重新分发",
                                disabled: () => {
                                    return this.disabledAllBtn
                                },
                                on: {
                                    click: (data) => {
                                        this.reSend(data)
                                    }
                                }
                            }
                        ],
                        // render: (h, params) => {
                        //     return h('div',{},[
                        //         h('Button',{
                        //             props: {
                        //                 type: 'primary',
                        //                 size: 'small',
                        //                 disabled: this.disabledAllBtn
                        //             },
                        //             style: {
                        //                 marginRight: '10px'
                        //             },
                        //             on: {
                        //                 click: () => {
                        //                     this.downloadFile(params.row)
                        //                 }
                        //             }
                        //         },'下载'),
                        //         h('Button',{
                        //             props: {
                        //                 type: 'primary',
                        //                 size: 'small',
                        //                 disabled: this.disabledAllBtn
                        //             },
                        //             on: {
                        //                 click: () => {
                        //                     this.reSend(params.row)
                        //                 }
                        //             }
                        //         },'重新分发'),
                        //     ])
                        // }
                    }
                ],
                vpnColumns2: [
                    {
                        type:'selection',
                        width:60
                    },
                    {
                        title: '用户名称',
                        key: 'userName',
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                        width: 200,
                        placement: 'top-left',
                    },
                    {
                        title: '团队名称',
                        key: 'partyName',
                        align: 'center',
                        width: 150,
                        tooltip: true,
                    },
                    {
                        title: 'VPN名称',
                        key: 'vpnName',
                        align: 'center',
                        width: 200,
                        tooltip: true,
                    },
                    {
                        title: 'VPN生成状态',
                        key: 'vpnDistributionStatus',
                        align: 'center',
                        width: 120,
                        tooltip: true,
                        render: (h, params) => {
                            let status = params.row.vpnDistributionStatus
                            if(status == 'success' && !params.row.vpnFilepath) {
                                status = 'waiting'
                            }
                            // vpn地址未生成，前端变更为等待路径生成中状态
                            return h('div',{
                                style: {
                                    color: (status == 'success' && '#19be6b') || ((status == 'running' || status == 'waiting') && '#2db7f5') || (status == 'failed' && '#ed4014')
                                }
                            },this.valueToLabel(status, this.vpnStatusList))
                        }
                    },
                    {
                        title: '分发状态',
                        key: 'statusDistribute',
                        align: 'center',
                        width: 100,
                        tooltip: true,
                        placement: 'top-right',
                        render: (h, params) => {
                            let status = params.row.statusDistribute
                            return h('div',{
                                style: {
                                    color: (status == 1 && '#19be6b') || (status == 2 && '#2db7f5') || (status == 3 && '#2db7f5') || (status == 4 && '#ed4014')
                                },
                            },this.valueToLabel(status, this.statusDistributeList))
                        }
                    },
                    {
                        title: '失败原因',
                        key: 'failMessage',
                        align: 'center',
                        width: 350,
                        tooltip: true,
                        placement: 'top-right',
                        // render: (h, params) => {
                        //     let isShow = params.row.statusDistribute == 4
                        //     if(isShow) {
                        //         return h('Tooltip',{
                        //             props: {
                        //                 content: params.row.failMessage,
                        //                 placement: 'top',
                        //                 transfer: true
                        //             }
                        //         },[
                        //             h('div',{
                        //                 style: {
                        //                     width: '300px',
                        //                     // visibility: isShow?'inherit':'hidden',
                        //                     overflow: 'hidden',
                        //                     whiteSpace: 'nowrap',
                        //                     textOverflow: 'ellipsis',
                        //                 }
                        //             },'失败原因：'+params.row.failMessage)
                        //         ])
                        //     }
                        // }
                    },
                    {
                        title: '操作',
                        action: true,
                        key: 'action',
                        width: 200,
                        placement: 'top-right',
                        opList:[
                            {
                                txt:"重新生成",
                                disabled: (data) => this.disabledAllBtn||data.vpnDistributionStatus =='success',//!this.isAllFailed || 
                                on: {
                                    click: (data) => {
                                        this.reCreateVpn(data)
                                    }
                                }
                            },
                            {
                                txt:"下载",
                                disabled: (data) => (data.vpnDistributionStatus != 'success') || this.disabledAllBtn,
                                on: {
                                    click: (data) => {
                                        this.downloadFile(data)
                                    }
                                }
                            },
                            {
                                txt:"重新分发",
                                disabled: (data) => !data.vpnDistributionStatus=='success',
                                on: {
                                    click: (data) => {
                                        this.reSend(data)
                                    }
                                }
                            }
                        ]
                    }
                ],
                modalVPN: false,
                teamName: '',
                vpnIp: '',
                ip: '',
                address: '',
                totalModal: 0,
                pageIndexModal: 1,
                pageSizeModal: 10,
                dataModal: [],
                columnsModal: [
                    {
                        title: '团队名称',
                        render: (h, params) => {
                            return h('div',this.currentInfo.data[0].team)
                        }
                    },
                    {
                        title: 'VPNIP',
                        key: 'tunnelIp'
                    },
                    {
                        title: '远程IP',
                        key: 'remoteIp'
                    },
                    {
                        title: '发送流量',
                        key: 'txByte'
                    },
                    {
                        title: '接收流量',
                        key: 'rxByte'
                    },
                    {
                        title: '地理位置',
                        key: 'position'
                    },
                    {
                        title: '时间',
                        key: 'connectedSince'
                    },
                ],
                chooseVpnInfo: [], // 当前选中vpn信息
                downLoading: false,
                sendLoading: false,
                scriptId: '',
                vpnStatusList: [
                    { label: '成功', value: 'success' },
                    { label: '运行中', value: 'running' },
                    { label: '失败', value: 'failed' },
                    { label: '等待路径', value: 'waiting' },
                ],
                userListTimer: '',
                vpnLoading: false,
                isShowFirst: false, // 显示初始生成按钮
                firstLoading: false,
                timeBan: false,
                currentInfo: {},
                // isAllSuccess: false, // vpn状态是否全部成功
                // isAllFailed: true, // vpn状态是否全部失败
				vpnTimer: '',
            }
        },
        computed:{
            isAllSuccess(){
                if(this.type == 2){
                    return this.chooseVpnInfo.every(item => {
                        return item.vpnDistributionStatus === 'success' && !!item.vpnFilepath
                    })
                }else{
                    return true
                }
            },
            isAllFailed(){
                if(this.type == 2){
                    return !this.chooseVpnInfo.some(item => {
                        return item.vpnDistributionStatus === 'success'
                    })
                }else{
                    return false
                }
            }
        },
        methods: {
            getAllCount(){
              let params = {
                testId: this.testId,
                pageSize: 100000,
                pageIndex: 1,
                teamName: '',
                userName:  '',
                vpnName:  '',
                statusDistribute:  '',
              }
              console.log('-------testid-',this.testId)
              teamGroupList(params).then(res => {
                if(res.code == 1) {
                  this.vpnNum.teamNum = res.data.total || 0
                }
              })

              teamPersonList(params).then(res => {
                if(res.code == 1) {
                  this.vpnNum.userNum = res.data.total || 0
                }
              })
              getOnlineVPNCount(params).then(res => {
                if(res.code == 1) {
                  this.vpnNum.onlineUserNum = res.data.onlineUserNum || 0
                  this.vpnNum.onlineTeamNum = res.data.onlineTeamNum || 0
                }
              })

  
              
            },
            selectAllChange(val) {
                // console.log('val',val)
                this.vpnData.forEach((item) => {
                    this.$set(item, 'checked', val);
                });
                // console.log('change Vpndata',this.vpnData)
                this.vpnData.forEach(ele => {
                    let ids = this.chooseVpnInfo.map(item => {
                        return item.id
                    })
                    let index = ids.indexOf(ele.id)
                    if(ele.checked) {
                        if(index == -1) {
                            this.chooseVpnInfo.push(ele)
                        }
                    }else {
                        if(index > -1) {
                            this.chooseVpnInfo.splice(index, 1)
                        }
                    }
                })
            },
			modalChange(val) {
				if(!val) {
					console.log('取消---')
                    this.ip = '',
                    this.vpnIp = '',
                    this.address= '',
                    this.dataModal = []
                    this.totalModal = 0
					clearInterval(this.vpnTimer)
				}
			},
            getShowFirst() {
                let params = {
                    testId: this.testId,
                    pageSize: 10,
                    pageIndex: 1,
                }
                teamPersonList(params).then(res => {
                    if(res.code == 1 && res.data.total == 0) {
                        this.isShowFirst = true
                    } 
                })
            },
            createData() {
                this.firstLoading = true
                this.timeBan = true
                VpnGenerate(this.$route.query.prjid,this.testId).then(res => {
                    if(res.code == 1) {
                        this.getDataList()
                        this.$Message.success('生成成功')
                    }else {
                        this.$Message.success('生成失败')
                    }
                }).finally(() => {
                    this.firstLoading = false
                    setInterval(() => {
                        this.timeBan = false
                    }, 10000);
                })  
            },
            createVpnData() {
                if(this.chooseVpnInfo.length == 0) {
                    this.$Message.warning('请选择用户')
                    return
                }
                let teamVpnList = []
                this.chooseVpnInfo.forEach(ele => {
                    teamVpnList.push({
                        deviceId: ele.deviceId,
                        teamId: ele.teamId,
                        teamName: ele.teamName,
                        userScriptList: [
                            {
                                userId: ele.userId,
                                userName: ele.peopleName
                            }
                        ]
                    })
                })
                this.vpnLoading = true
                let params = {
                    teamVpnList: teamVpnList
                }
                vpnRegeneration(this.$route.query.prjid,this.testId,params).then(res => {
                    console.log('res',res)
                    if(res.code == 1) {
                        this.getDataList()
                        this.$Message.success('重新生成成功')
                    }else {
                        this.$Message.success('生成失败')
                    }
                }).finally(() => {
					this.chooseVpnInfo = []
                    // this.$refs.cardList.clearChooseAll()
                    this.vpnLoading = false
                    this.selectAll = false
                })
            },
            reCreateVpn(row) {
                let params = {
                    teamVpnList: [
                        {
                            deviceId: row.deviceId,
                            teamId: row.teamId,
                            teamName: row.name,
                            userScriptList: [
                                {
                                    userId: row.userId,
                                    userName: row.peopleName
                                }
                            ]
                        }
                    ]
                }
                vpnRegeneration(this.$route.query.prjid,row.testId,params).then(res => {
                    console.log('res',res)
                    if(res.code == 1) {
                        this.getDataList()
                        this.$Message.success('重新生成成功')
                    }else {
                        this.$Message.success('生成失败')
                    }
                })
            },
            valueToLabel(key, list) {
                let label = ''
                list.forEach(ele => {
                    if(key == ele.value) {
                        label = ele.label
                    }
                })
                return label || key
            },
            // cancelChoose(state, item) {
            //     this.onCheck(state, item)
            //     this.$refs.cardList.cancelChoose(item.id)
            // },
            // onCheck(state, item) {
            //     let ids = this.chooseVpnInfo.map(item => {
            //         return item.id
            //     })
            //     let index = ids.indexOf(item.id)
            //     if(state) {
            //         if(index == -1) {
            //             this.chooseVpnInfo.push(item)
            //         }
            //     }else {
            //         if(index > -1) {
            //             this.chooseVpnInfo.splice(index, 1)
            //         }
            //     }
			// 	if(this.type == 2) {
			// 		this.isAllSuccess = this.chooseVpnInfo.every(item => {
			// 			return item.vpnDistributionStatus == 'success' && !!item.vpnFilepath
			// 		})
			// 		this.isAllFailed = true
			// 		this.chooseVpnInfo.forEach(ele => {
			// 			if(ele.vpnDistributionStatus == 'success') {
			// 				this.isAllFailed = false
			// 			}
			// 		})
			// 	}
            //     let isAll = true
            //     this.vpnData.forEach(ele => {
            //         this.$nextTick(()=>{
            //             if(!ele.checked) {
            //                 isAll = false
            //             }
            //         })
            //     })
            //     this.$nextTick(()=>{
            //         this.selectAll = isAll
            //     })
            //     // console.log('item',item)
            //     // console.log('change Vpndata',this.vpnData)
            // },
            // 重新分发
            reSend(row) {
				let params = []
				if(this.type == 1) {
                    params = [
						{
							testId: row.data[0].testId,
							userList: row.data
						}
					]
				}else {
					params = [
						{
							testId: row.testId,
							userList: [
								{
									userId: row.userId,
									vpnName: row.vpnName,
									vpnFilepath: row.vpnFilepath,
                                    vpnDistributionStatus: row.vpnDistributionStatus,
                                    userName:row.userName
								}
							]
						}
					]
				}
                redisDistribute(params).then(res => {
                    console.log('分发',res)
                    if(res.code == 1) {
                        this.$Message.success('分发成功')
                    }else {
                        this.$Message.error(res.message)
                    }
                }).finally(() => {
                    if(this.type == 2) {
                        this.getDataList()
                    }
                })
            },
            // 下载
            downloadFile(row) {
                let ids = []
                if(this.type == 1) {
                    row.data.forEach(ele => {
                        ids.push(ele.userId)
                    })
                }else {
                    ids.push(row.userId)
                }
                let params = {
                    ids: ids.join(','),
                    projectId: this.$route.query.prjid,
                    testId: this.type == 1?row.data[0].testId:row.testId
                }
                downLoadFilevpn(params).then(res => {
                    if(res && res.code === 0) {
                        this.$Message.error(res.message)
                    }else {
                        const downloadElement = document.createElement('a');
                        const href = window.URL.createObjectURL(res);
                        downloadElement.href = href;
                        downloadElement.download = this.type == 1?`${row.data[0].team}-VPN.zip`:`${row.userName}-VPN.zip`;
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement); // 下载完成移除元素
                        window.URL.revokeObjectURL(href); // 释放掉blob对象
                    }
                })
            },
            // 显示vpn状态
            showStatus(row) {
                console.log('row,',row)
                this.currentInfo = row
                getScriptId({deviceId: row.data[0].deviceId}).then(res => {
                    console.log('res',res)
                    if(res.code == 1) {
                        this.modalVPN = true
						this.scriptId = res.data
						this.getModalList()
                    }else {
                        this.$Message.error(res.message)
                    }
                })
                
            },
            // vpn列表数据查询
            getDataList() {
                let params = {
                    testId: this.testId,
                    pageSize: this.pageSize,
                    pageIndex: this.pageIndex,
                    teamName: this.querySearch.teamName,
                    userName: this.querySearch.userName,
                    vpnName: this.querySearch.vpnName,
                    statusDistribute: this.querySearch.statusDistribute
                }
                let apiName = this.type == 1?teamGroupList:teamPersonList
                apiName(params).then(res => {
					if(res.code == 1) {
						if(this.type == 1) {
							res.data.items.forEach(ele => {
								ele.id = ele.teamId
							})
						}else {
							// let ids = this.chooseVpnInfo.map(item => {return item.id})
							// res.data.items.forEach(ele => {
							// 	if(ids.indexOf(ele.id) > -1) {
							// 		ele.checked = true
							// 	}
							// })
						}
                        this.vpnData = res.data.items
                        this.total = res.data.total
                        // const ids = this.chooseVpnInfo.map(obj => obj.id);
                        // if(ids.length){
                        //     const matchingObj = this.vpnData.filter(obj => ids.includes(obj.id));
                        //     matchingObj.forEach(item=>item.checked = true)
                        // }
					}
                }).finally(() => {
                    // if(this.type == 2) {
                    //     clearInterval(this.userListTimer)
                    //     this.userListTimer = setInterval(() => {
                    //         this.getDataList()
                    //     }, 10000);
                    // }
                })
            },
            // vpn状态列表查询
            getModalList() {
                clearInterval(this.vpnTimer)
                let params = {
                    scriptId: this.scriptId,
                    projectId: this.$route.query.prjid,
                    pageIndex: this.pageIndexModal,
                    pageSize: this.pageSizeModal,
                    remoteIpParams: this.ip,
                    tunnelIpParams: this.vpnIp,
                    positionParams: this.address,
                }
                // getVpnStatus(params).then(res => {
                //     if(res.code == 1) {
                //         this.dataModal = res.data.items
                //         this.totalModal = res.data.total
                //     }else {
                //         this.$Message.error(res.message)
                //     }
                // })
                this.vpnTimer = setInterval(() => {
                    getVpnStatus(params).then(res => {
                        if(res.code == 1) {
                            this.dataModal = res.data.items
                            this.totalModal = res.data.total
                        }else {
                            this.$Message.error(res.message)
                        }
                    })
                }, 2000);
            },
            pageChange(page) {
                this.pageIndex = page
                this.getDataList()
            },
            sizeChange(size) {
                this.pageSize = size
                this.getDataList()
            },
            pageChangeModal(page) {
                this.pageIndexModal = page
                this.getModalList()
            },
            onBounceQuery: debounce(function () {
                this.pageChange(1)
            },200),
            onBounceModal: debounce(function () {
                this.pageChangeModal(1)
            },200),
            // 批量分发
            sendData() {
                if(this.chooseVpnInfo.length == 0) {
                    this.$Message.warning(this.type == 1?'请选择团队':'请选择用户')
                    return
                }
                let params = []
                if(this.type == 1){
                    this.chooseVpnInfo.forEach(row => {
                        // console.log(row);
                        params.push({
                            testId: row.data[0].testId,
                            userList:row.data.map(item => {
                                return {
                                    userId: item.userId,
                                    vpnName:item.vpnName,
                                    vpnFilepath:item.vpnFilepath,
                                    userName:item.userName,
                                    vpnDistributionStatus:'success',
                                }
                            })
                        })
                    })
                }else{
                    this.chooseVpnInfo.forEach(row => {
                        params.push({
                            testId: row.testId,
                            userList: row.userId?[
                                {
                                    userId: row.userId,
                                    vpnName: row.vpnName,
                                    vpnFilepath: row.vpnFilepath,
                                    userName:row.userName,
                                    vpnDistributionStatus:'success'
                                }
                            ]:row.userList
                        })
                    })
                }
                this.sendLoading = true
                redisDistribute(params).then(res => {
                    if(res.code == 1) {
                        this.$Message.success('分发成功')
                    }else {
                        this.$Message.error(res.message)
                    }
                }).finally(() => {
                    this.selectAll = false
					this.chooseVpnInfo = []
                    // this.$refs.cardList.clearChooseAll()
                    this.sendLoading = false
                    if(this.type == 2) {
                        this.getDataList()
                    }
                })
            },
            downloadData() {
                let filePath = this.chooseVpnInfo.map(item => {
                    return item.vpnFilepath
                })
                if (filePath.length == 0) {
                    this.$Message.warning(this.type == 1?'请选择团队':'请选择用户')
                    return
                }
                this.downLoading = true
                let params = {
                    projectId: this.$route.query.prjid,
                    testId: this.$route.query.id
                }
                let ids = []
                if(this.type == 1) {
                    this.chooseVpnInfo.forEach(row => {
                        row.data.forEach(ele => {
                            ids.push(ele.userId)
                        })
                    })
                }else {
                    this.chooseVpnInfo.forEach(row => {
                        ids.push(row.userId)
                    })
                }
                params.ids = ids.join(',')
                downLoadFilevpn(params).then(res => {
                    if(res && res.code === 0) {
                        this.$Message.error(res.message)
                    }else {
                        const downloadElement = document.createElement('a');
                        const href = window.URL.createObjectURL(res);
                        downloadElement.href = href;
                        // downloadElement.download = this.type == 1?'团队VPN.zip':'用户VPN.zip';
                        downloadElement.download = 'VPN集合.zip'
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement); // 下载完成移除元素
                        window.URL.revokeObjectURL(href); // 释放掉blob对象
                    }
                }).finally(() => {
					this.chooseVpnInfo = []
                    // this.$refs.cardList.clearChooseAll()
                    this.downLoading = false
                    this.selectAll = false
                })
            },
        }
    }
</script>

<style scoped>
.header-box {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
}
.action-box {
    display: flex;
    flex-wrap: wrap;
}
.action-style {
    width: 150px;
    margin-right: 15px;
    margin-bottom: 8px
}
.button-style {
    margin-right: 15px;
    margin-bottom: 8px
}
</style>
<style>
.vpn-status-modal .defGraphWrap {
    height: calc(100vh - 400px);
}
.online-data{
  display: flex;
  flex-direction: row;
  line-height: 28px;
  margin-top: -11px;
}
.ol-person-data ,.ol-team-data{
  border: 1px solid #2d8cf0!important;
  color:#2d8cf0 ;
  margin-right: 24px;
  padding-right: 12px;
}
.ol-person-data .online,.ol-team-data .online{
  border-left: 1px dashed #2d8cf0!important;
  display: inline-block;
  padding:0 8px 0 12px;
}
.online-data .ol-icon{
  font-size: 20px;
  margin: 0 10px 0 12px;
}
.online-data .online-total{
  margin-left: 8px;
}


</style>